@charset "utf-8";
@import "reset";
@function v($p){
    @return $p/1920*100vw;
}

//页面
body{font-size: 13px;
    width: 100%;
    padding-top: 90px;}   

.Web{
    width: 100%;
    position: relative;}
//header 头部
header{
    width: 100%;
    padding: v(25) v(53) v(15);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    position: fixed;
    top: 0;
    z-index: 10;
    //header_menu 菜单
    .header_menu{width: v(32);}
    //header_logo logo
    .header_logo{height: 50px;}
    //header_search 搜索
    .header_search{width: v(29);}
    >input{display: none;}

    //大div-菜单
    .BigMenu{
//      display: none;
        z-index: 1;
        width: 100%;
        background: white;
        padding: v(105) v(53) v(222);
        //设置了一个 v(120) 取消-----------------------
        box-sizing: border-box;
//      margin-left: v(53);
        //设置了一个 v(53) 取消-----------------------
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        .cha{width: v(26);
            position: absolute;
            top: v(90);
            left: 0;
            margin-left: v(53);
            img{width: 100%;}
        }
        .ico{
            margin-bottom: v(85);
            a{margin: 0 v(15);}
            a:nth-child(1)>img{width: v(35);}
            a:nth-child(2)>img{width: v(34);}
            a:nth-child(3)>img{width: v(27);}
            a:nth-child(4)>img{width: v(27);}
        }
        //选项
        .mune_ul{
            li{width: v(429);
                margin: 0 auto;
                padding-bottom: v(40);
                margin-bottom: v(64);
                border-bottom: 1px solid #8f8f8f;}
            li:nth-child(1)>a>img{width: 38.93%;}
            li:nth-child(2)>a>img{width: 32.40%;}
            li:nth-child(3)>a>img{width: 72.96%;}
            li:nth-child(4)>a>img{width: 66.43%;}
            li>a>img:hover{animation: changeopacity 1s;}
        }
        //小选项
        .mune_smul{
            display: flex;
            align-items: center;
            justify-content: center;
            li:nth-child(odd){
                width: v(56);
                height: v(4);
                background: #978974;
                margin: 0 v(6);
            }
            li:nth-child(2)>a>img{width: v(54);}
            li:nth-child(4)>a>img{width: v(60);}
            li:nth-child(6)>a>img{width: v(99);}
            li:nth-child(even):hover >a>img{transform: scale(1.1);transition: all 1s;}
        }
    }
    //--------点击出现--大div-菜单
    input#input_menu[type="checkbox"]:checked~div.BigMenu{display: block;}
    input#input_menu[type="checkbox"]:not(:checked)~div.BigMenu{display: none;}
    //----小手
    .header_menu,.header_search,.BigSearch_topleft>label,.cha:hover{cursor: pointer;}
    //大div-搜索
    .BigSearch{
//      display: none;
        z-index: 1;
        width: 100%;
        background: white;
        padding: v(164) v(304) v(500);
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        .BigSearch_topleft{
            display: flex;
            align-items: center;
            .leftsign{width: v(36);
                margin-right: v(12);}
            .return{width: v(63);}
        }
        .search_input{
            margin-top: v(264);
            margin-bottom: v(44);
            input{
                width:100%;
                font-size: v(100);
                padding: v(10) v(50);
                box-sizing: border-box;
                border: 0;
                color: skyblue;
                text-align: center;
                border: 1px solid gainsboro;
            }
        }
        .BigSearch_btm{
            text-align: center;
            img{width: v(265);}
        }
    }
    //--------点击出现--大div-搜索
    input#input_search[type="checkbox"]:checked~div.BigSearch{display: block;}
    input#input_search[type="checkbox"]:not(:checked)~div.BigSearch{display: none;}
//-/header 头部
}

//底部
footer{
    width: 100%;
    background: black;
    opacity: .8;
    padding:v(45) v(485);
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    p{font-size: v(11);
        color:white;}
    .topsign{height: v(16);cursor: pointer;}
}

//-------------------------动画
@keyframes changeopacity{
    0%,100%{opacity: 1;}
    50%{opacity: 0;}
}

.section_footer{opacity: .8;transition: all 1s;}
.section_footer:hover{opacity: 1;cursor: pointer;}

button{outline: none;}
button:hover{color: dimgrey!important;
    background:white!important;
    border-radius: v(5);}
//-----------------------/-动画